/**
 * @description 搜索框
 */
import React from 'react';
import { Button, Form } from 'antd';
import YyFormItem from '@/components/FormItem'
import AbIcon from '@/components/DecorateIcons/Ab_Icon';

const formItemList = [
  {
    form_type: 'YyText',
    columnName: 'YyText',
    comments: '普通',
    placeholder: "请输入文本"
  },
  {
    form_type: 'YySingleSelect',
    columnName: 'YySingleSelect',
    comments: '单选',
    placeholder: "请选择",
    options: [
      {
        label: '选项一',
        value: '选项一',
      },
      {
        label: '选项二',
        value: '选项二',
      },
    ],
  },
  {
    form_type: 'YyDatePicker',
    columnName: 'YyDatePicker',
    comments: '日期',
    placeholder: "选择日期",
  }
]

function ListSearch({ base }) {
  const [form] = Form.useForm()

  return (
    <Form
      form={form}
      className='search'
      layout="inline"
      colon={base.colonFlag}
      autoComplete="off"
      spellCheck="false"
    >

      {/* 表单，根据form_type确定不同的输入框 */}
      {
        formItemList.map(column => (
          <YyFormItem
            key={column.columnName}
            form={form}
            column={column}
            showLabel={base.labelFlag}
            selectAllowClear={true}
          />
        ))
      }

      {/* 按钮盒子*/}
      <div className='btn-wrapper'>

        {/* 查询 */}
        <Button className='submit-btn' icon={<AbIcon className='icon' iconName={base.search_icon} />} type="primary" htmlType="submit">{base.search_text}</Button>
      </div>

    </Form>
  )
}

export default React.memo(ListSearch)